<template>
    <div class="push-dialog-container saleMarketRight">
      <div class="analysis-dialog">
        <el-dialog class="dialogHeaderFont" title="活动推送" width="92%" top="8vh"
                   @close="$emit('update:showdialog', false)" :visible.sync="visible">
          <div class="push-dialog-content">
            <div class="push-dialog-item dialog-item-small">
              <div class="dialog-item-small-container">
                <div class="titleHeader">
                  推送消息
                </div>
                <div class="contentBody">
                  <div class="theme-container">
                    <el-input placeholder="活动名称" v-model="salePointInfo.trialSalePointName" :disabled="true">
                      <template slot="prepend">活动名称</template>
                    </el-input>
                  </div>
                  <div class="content-container">
                    <div class="titleHeader">
                      内容
                    </div>
                    <div class="detail-dialog-content">
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          活动类型：
                        </div>
                        <div class="item-part setColor">
                          试销
                        </div>
                      </div>
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          产品型号：
                        </div>
                        <div class="item-part setColor" v-text="salePointInfo.productCode">
                        </div>
                      </div>
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          活动时间：
                        </div>
                        <div class="item-part setColor">
                          {{ salePointInfo.startTime + ' - ' + salePointInfo.endTime }}
                        </div>
                      </div>
                      <div class="detail-dialog-item">
                        <div class="item-part">
                          活动点：
                        </div>
                        <div class="item-part setColor">
                          {{ salePointInfo.region + '/'+ salePointInfo.province+ '/'+ salePointInfo.city }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="push-dialog-item dialog-item-max">
              <div class="dialog-item-max-container">
                <div class="titleHeader">
                  推送对象
                </div>
                <div class="contentBody pushBody">
                  <div class="push-item pushContainer">
                    <div class="push-object organizationContainer">
                      <div class="objectContainer">
                        <div class="titleHeader">
                          组织机构
                        </div>
                        <div class="organization">
                          <el-tree :data="renderOrganization" accordion :props="defaultProps" @node-click="handleOrganization"></el-tree>
                        </div>
                      </div>
                    </div>
                    <div class="push-object rangeContainer">
                      <div class="objectContainer">
                        <div class="titleHeader titleHeaderSet">
                          <div class="pushRange">
                            推送范围
                          </div>
                          <div class="pushRangeSet">
                            <el-radio-group @change="pushRadioSwitch" size="small" v-model="pushRadio">
                              <el-radio-button label="0">按岗位推送</el-radio-button>
                              <el-radio-button label="1">按人员推送</el-radio-button>
                            </el-radio-group>
                          </div>
                        </div>
                        <div class="pushRangeCont">
                          <div class="pushRangeItem" v-show="pushRadio == 0">
                            <el-table ref="multipleTableSet" max-height="235" stripe border :data="employeeItems" tooltip-effect="dark"
                                      size="mini" style="width:98%;" @selection-change="handleSelectionChangeStation">
                              <el-table-column
                                type="selection"
                                width="105">
                              </el-table-column>
                              <el-table-column
                                prop="postName"
                                label="岗位">
                              </el-table-column>
                            </el-table>
                          </div>
                          <div class="pushRangeItem" v-show="pushRadio == 1">
                            <el-table ref="multipleTableMine" max-height="235" stripe border :data="employeeItems" tooltip-effect="dark"
                                      size="mini" style="width:98%;" @selection-change="handleSelectionChangePeople">
                              <el-table-column
                                type="selection"
                                width="45">
                              </el-table-column>
                              <el-table-column
                                prop="employeeid"
                                label="员工编号"
                                width="110">
                              </el-table-column>
                              <el-table-column
                                prop="name"
                                label="员工名称"
                                width="90">
                              </el-table-column>
                              <el-table-column
                                prop="positioame"
                                label="职位"
                                width="100">
                              </el-table-column>
                              <el-table-column
                                prop="postName"
                                label="岗位"
                                show-overflow-tooltip>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="push-item pushMode">
                    <div class="pushMode-item modeSet">
                      <div>消息推送方式</div>
                      <div>
                        <el-checkbox v-model="pusher">显示推送者信息</el-checkbox>
                      </div>
                    </div>
                    <div class="pushMode-item">
                      <el-checkbox-group v-model="pushItemsChecked" :min="1">
                        <el-checkbox v-for="push in pushOptions" :label="push.value" :key="push.value" :disabled="push.value==='appMessage'">{{push.label}}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                  <div class="push-item pushSend">
                    <div class="pushOperate">
                      <el-button type="primary" size="small" :loading="loadSet" style="width: 120px;" @click="pushMessageSend">推送</el-button>
                      <el-button size="small" style="width: 120px;" @click="$emit('update:showdialog', false)">取消</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import * as opreate from 'api/getData'
  import { treeSolve } from 'utils/mUtils'

  export default {
    name: "push-dialog",
    props: {
      showdialog: {
        type: Boolean,
        default: false
      },
      salePointInfo:{
        type: Object,
        default(){
          return {}
        },
        required: true
      }
    },
    computed:{
      ...mapGetters(["pushOptions","renderOrganization"])
    },
    data() {
      return {
        visible: this.showdialog,
        pushRadio: '0',
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        pushItemsChecked: ['textMessage'],
        pusher: true,
        multipleSelectionPeople: [],
        multipleSelectionStation: [],
        employeeItems: [],
        loadSet: false
      }
    },
    mounted() {
      this.loadSet = false
    },
    methods: {
      pushMessageSend(){
        let pushWay = this.pushItemsChecked.join(',')
        if(pushWay == ''){
          this.$message.error('请至少选择一种消息推送方式')
        }else {
          let staffNumSet = '1' == this.pushRadio ? this.$refs.multipleTableMine.selection : this.$refs.multipleTableSet.selection
          staffNumSet = Array.isArray(staffNumSet) ? staffNumSet.map(v => v.employeeid).join(',') : ''
          if(staffNumSet == ''){
            this.$message.error('请至少选择一个推送对象')
          }else {
            let { region, province, city, startTime, endTime, trialSalePointName, productCode } = this.salePointInfo
            let tempSet = {
              pushType: 'newProductVerb',
              pushSubject: trialSalePointName,
              staffNum: staffNumSet,
              pushWay: pushWay
            }
            this.loadSet = true
            opreate.pushSendMessage(Object.assign(tempSet,{
              productCode: productCode,
              activityType: '试销',
              activityTime: startTime + ' - ' + endTime,
              activityNoun: region + '/'+ province+ '/' + city
            })).then(res => {
              this.loadSet = false
              if('200' == res.code){
                this.$message.success('消息已成功推送')
              }else {
                this.$message.error('消息推送失败')
              }
              this.$emit('update:showdialog', false)
            })
          }
        }
      },
      handleOrganization(val){
        this.initStateEmployee(val)
      },
      pushRadioSwitch(val){
        this.pushRadio = val
      },
      handleSelectionChangePeople(val) {
        this.multipleSelectionPeople = val
      },
      handleSelectionChangeStation(val) {
        this.multipleSelectionStation = val
      },
      initStateEmployee(val){
        opreate.getEmployeeSet({idList: treeSolve(val)}).then(res => {
          this.employeeItems = res.data
        })
      }
    },
    watch: {
      showdialog(visible){
        this.visible = visible
      },
      thisOrganizationTree(val){
        opreate.getEmployeeSet({idList: treeSolve(val[0])}).then(res => {
          this.employeeItems = res.data
        })
      }
    }
  }
</script>

<style scoped>
  .detail-dialog-content{
    background: white;
    padding: 5px 12px;
    border-radius: 4px;
  }
  .detail-dialog-item{
    display: flex;
    height: 30px;
    line-height: 30px;
    align-items: center;
  }
  .setColor{
    font-weight: 600;
  }
  .titleHeader{
    font-weight: bold;
  }
  /**
  * @desc: This is Note
   * 推送Dialog
  * @author: WJ
  * @date: 2018/09/26 13:51:19
  **/
  .push-dialog-content{
    display: flex;
  }
  .dialog-item-small{
    flex: 1;
    display: flex;
  }
  .dialog-item-max{
    flex: 2;
    display: flex;
    justify-content: flex-end;
  }
  .dialog-item-small-container{
    width: 98%;
    background: white;
  }
  .dialog-item-max-container{
    width: 98%;
    background: white;
  }
  .contentBody{
    padding: 12px;
  }
  .pushBody{
    display: flex;
    flex-direction: column;
  }
  .content-container{
    border: 1px solid #E0E8EF;
    border-radius: 4px;
    margin-top: 10px;
  }
  .pushContainer{
    display: flex;
    margin-bottom: 10px;
    min-height: 268px;
  }
  .organizationContainer{
    display: flex;
    flex: 3;
  }
  .rangeContainer{
    display: flex;
    flex: 5;
    justify-content: flex-end;
  }
  .objectContainer{
    width: 98%;
    border: 1px solid #E0E8EF;
    border-radius: 4px;
  }
  .titleHeaderSet{
    justify-content: space-between;
    padding: 0 3px 0 10px;
  }
  .pushRangeSet{
    display: flex;
    align-items: center;
  }
  .pushRangeSet label{
    margin: 0 !important;
  }
  .pushRangeCont{
    padding: 10px 0px 10px 10px;
  }
  .pushMode{
    border: 1px solid #E0E8EF;
    padding: 5px 10px;
  }
  .modeSet{
    display: flex;
    justify-content: space-between;
  }
  .pushSend{
    display: flex;
    justify-content: center;
    padding: 10px 10px 0 10px;
  }
  .pushOperate{
    width: 320px;
    display: flex;
    justify-content: space-between;
  }
</style>
